<template>
    <div>
        <rx-radio label="左对齐" cvalue="left" v-model="algin" @change="onRadioChange" />
        <rx-radio label="右对齐" cvalue="right" v-model="algin" @change="onRadioChange" />
        <rx-radio label="顶部对齐" cvalue="top" v-model="algin" @change="onRadioChange" />
        <rx-form :style="styleObject" :labelAlign="algin" labelWidth="80px">
            <rx-form-item label="名称" isRequire >
                <rx-input></rx-input>
            </rx-form-item>
            <rx-form-item label="联系电话">
                <rx-input></rx-input>
            </rx-form-item>
            <rx-form-item label="选择校区">
                <rx-select v-model="value">
                    <rx-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></rx-option>
                </rx-select>
            </rx-form-item>
        </rx-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            algin: '',
            styleObject: {
                width: '430px',
                border: '1px solid #D9E1F1',
                padding: '30px',
                borderRadius: '4px',
                background:'pink'
            },
            options:[
            {label:'华东',value:1},
            {label:'华中',value:2},
            {label:'华南',value:3}],
            value:''
        }
    },
    methods: {
        onRadioChange() {

        }
    }
}
</script>

<style>
</style>
